<template>
  <div class="scheduling">
    <el-divider content-position="left"> <i></i>任务启用 </el-divider>
    <el-form
      ref="form"
      :model="dataScheduling"
      label-width="120px"
      :rules="formRules"
    >
      <el-form-item label="任务是否启用" prop="isStart">
        <el-radio-group v-model="dataScheduling.jobIsStart">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="任务执行周期" prop="executionPeriod">
        <el-radio-group v-model="dataScheduling.jobExecutionPeriod">
          <el-radio :label="1">每年</el-radio>
          <el-radio :label="2">每月</el-radio>
          <el-radio :label="3">每周</el-radio>
          <el-radio :label="4">每天</el-radio>
          <el-radio :label="5">每小时</el-radio>
          <el-radio :label="6">每分钟</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="执行频率" prop="executionFrequency">
        <el-input
          style="width: 100px"
          v-model="dataScheduling.jobExecutionFrequency"
        ></el-input
        >执行一次
      </el-form-item>
      <el-form-item label="执行时间" prop="executionTime">
        <el-date-picker
          v-model="dataScheduling.jobExecutionTime"
          type="datetime"
          placeholder="选择日期时间"
          style="width: 220px"
        ></el-date-picker>
      </el-form-item>
      <el-divider content-position="left"> <i></i>任务运行状态 </el-divider>
      <el-form-item label="是否立即运行" prop="isExecution">
        <el-radio-group v-model="dataScheduling.jobIsExecution">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { isNumberValid } from "@/utils/validate"
export default {
  components: {},
  data () {
    return {
      dataScheduling: {},
      formRules: {}
    }
  },
  props: {
    initData: Object,
    mode: String
  },
  watch: {
    dataScheduling: {
      deep: true,
      handler: function (val) {
        console.log("dataScheduling", val)
        this.$emit("input", val)
      }
    },
    initData: {
      deep: true,
      handler: function (obj) {
        this.dataScheduling = Object.assign({}, obj)
      }
    }
  },
  methods: {
    setRules () {
      switch (this.mode) {
        default:
          this.formRules = {
            isStart: [{ required: true, message: "不能为空" }],
            executionPeriod: [{ required: true, message: "不能为空" }],
            executionFrequency: [
              { required: true, message: "不能为空" },
              { validator: isNumberValid }
            ],
            executionTime: [{ required: true, message: "不能为空" }],
            isExecution: [{ required: true, message: "不能为空" }]
          }
          break
      }
    },
    // 校验数据
    validateForm () {
      let flag = true
      this.$refs.form.validate((valid) => {
        if (valid) {
          flag = true
        } else {
          flag = false
        }
      })
      return flag
    }
  },
  mounted () {
    this.setRules()
  }
};
</script>
<style lang="scss" scoped>
.scheduling {
  .el-divider__text.is-left {
    left: 0;
    display: flex;
    flex-direction: row;
    > i {
      display: block;
      width: 3px;
      height: 14px;
      background: #128df3;
      margin-right: 5px;
    }
  }
  .tableBox {
    padding-left: 40px;
  }
}
</style>
